<template>
  <a-modal 
    v-model:visible="data.isShow"
    :title=" data.isAdd ? '新增菜单' : '修改菜单' "
    :confirm-loading="data.confirmLoading"
    :width="800"
    @ok="handleOkFunc"
  >
    <a-form
      ref="infoFormModel"
      :model="data.saveObject"
      :rules="data.rules"
      layout="vertical"
      labelAlign="left"
      :colon="false"
      :wrapper-col="{ span: 18 }"
    >
      <a-row>
        <a-col :span="12">
          <a-form-item label="所属系统：" name="sysType">
            <!-- <a-input v-model:value="data.saveObject['sysType'] ==" disabled /> -->
            <a-select v-model:value="data.saveObject['sysType']" disabled>
              <a-select-option value="MANAGER">
                显示菜单：运营平台&#12288;
              </a-select-option>
              <!-- <a-select-option v-if="$hasAgentEnt()" value="AGENT">
                  显示菜单：机构系统
                </a-select-option> -->
              <a-select-option v-if="$hasAgentEnt()" value="PROXY">
                显示菜单：机构系统&#12288;
              </a-select-option>
              <a-select-option value="MCH">
                显示菜单：商户系统&#12288;
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="父ID：" name="pid">
            <a-input v-model:value="data.saveObject['pid']" disabled />
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="路由id：" name="entId">
            <a-input v-model:value="data.saveObject['entId']" placeholder="eg: ENT_ROLE_LIST_ADD" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="路由名称：" name="entName">
            <a-input v-model:value="data.saveObject['entName']" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="路由图标：" name="menuIcon">
            <a-input v-model:value="data.saveObject['menuIcon']" />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="12">
          <a-form-item label="资源名称：" name="entName">
            <a-input v-model:value="data.saveObject['entName']" />
          </a-form-item>
        </a-col> -->
        <a-col :span="12">
          <a-form-item label="路由地址：" name="menuUri">
            <a-input v-model:value="data.saveObject['menuUri']" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="路由类型：" name="entType">
            <a-select v-model:value="data.saveObject['entType']">
              <a-select-option value="ML">左侧显示菜单</a-select-option>
              <a-select-option value="MO">其他菜单</a-select-option>
              <a-select-option value="PB">页面/按钮</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="组件Name（前后端分离使用）：" name="componentName">
            <a-input v-model:value="data.saveObject['componentName']" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="排序（正序显示）：" name="entSort">
            <a-input v-model:value="data.saveObject['entSort']" type="number" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="菜单匹配规则：" name="matchRule">
            <a-input v-model:value="data.saveObject['matchRule']" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="快速开始：" name="quickJump">
            <a-radio-group v-model:value="data.saveObject['quickJump']" :disabled="data.saveObject['menuType'] == 'PB' || !data.saveObject['menuUri']">
              <a-radio :value="1">
                是
              </a-radio>
              <a-radio :value="0">
                否
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="状态：" name="state">
            <a-radio-group v-model:value="data.saveObject['state']">
              <a-radio :value="1">
                启用
              </a-radio>
              <a-radio :value="0">
                停用
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>


    <!-- <a-form ref="infoFormModel" :model="data.saveObject" :label-col="{span: 6}" :wrapper-col="{span: 15}" :rules="data.rules">
      <a-form-item label="资源名称：" name="entName">
        <a-input v-model:value="data.saveObject['entName']" />
      </a-form-item>

      <a-form-item label="路径地址：" name="menuUri">
        <a-input v-model:value="data.saveObject['menuUri']" />
      </a-form-item>

      <a-form-item label="排序（正序显示）：" name="entSort">
        <a-input v-model:value="data.saveObject['entSort']" />
      </a-form-item>

      <a-form-item label="快速开始：" name="quickJump">
        <a-radio-group v-model:value="data.saveObject['quickJump']" :disabled="data.saveObject['menuType'] == 'PB' || !data.saveObject['menuUri']">
          <a-radio :value="1">
            是
          </a-radio>
          <a-radio :value="0">
            否
          </a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="状态：" name="state">
        <a-radio-group v-model:value="data.saveObject['state']">
          <a-radio :value="1">
            启用
          </a-radio>
          <a-radio :value="0">
            停用
          </a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form> -->
  </a-modal>
</template>

<script lang="ts" setup>
import {$entsAdd,$getEntBySysType,$updateById} from '@/api/sysManage/userRoleManage/ent'
import {ref, reactive} from 'vue'
import {message} from 'ant-design-vue'
 const props= defineProps({
    callbackFunc: { type: Function,default:null }
  })
    const infoFormModel = ref()
    const data = reactive ({
      confirmLoading: false, // 显示确定按钮loading图标
      isAdd: true, // 新增 or 修改页面标识
      isShow: false, // 是否显示弹层/抽屉
      saveObject: {}, // 数据对象
      recordId: null, // 更新对象ID
      sysType: 'MANAGER', // 菜单类型
      // entId：路由Id*   
      // state:状态
      // pid:父ID*
      // entSort:排序字段*
      // sysType:所属系统*
      rules: {
        entName: [
          { required: true, message: '请输入路由名称', trigger: 'blur' },

        ],
        entId: [
          { required: true, message: '请输入路由Id', trigger: 'blur' },
          
        ],
        state: [
          { required: true, message: '请选择状态', trigger: 'change' },
          
        ],
        pid: [
          { required: true, message: '请输入父ID', trigger: 'blur' },
          
        ],
        sysType: [
          { required: true, message: '请输入所属系统', trigger: 'blur' },
          
        ],
        entSort: [
          { required: true, message: '请输入排序字段', trigger: 'blur' },
          
        ]
      }
    })

 defineExpose({show})

   function show (recordId, sysType,addType,params,record) { // 弹层打开事件
   
   
      data.isAdd = !recordId
      data.sysType = sysType
      data.saveObject = {} // 数据清空
      data.confirmLoading = false // 关闭loading

      if (infoFormModel.value !== undefined) {
        infoFormModel.value.resetFields()
      }

      if (!data.isAdd) { // 修改信息 延迟展示弹层
        data.recordId = recordId
        $getEntBySysType(recordId, sysType).then(res => { data.saveObject = res })
        data.isShow = true
        
      } else {
        if(addType == 'tit'){
          // 这个是总的新增
          data.saveObject['sysType'] = params
          data.saveObject['pid'] = 'ROOT'

          data.isShow = true // 立马展示弹层信息

          
        }else if(addType == 'col'){
          // 表格每一行的新增
          data.saveObject['sysType'] = params
          data.saveObject['pid'] = record
          // console.log('表格每一行的新增',record)

          data.isShow = true // 立马展示弹层信息

        }
        
      }
    }

   function handleOkFunc (){ // 点击【确认】按钮事件
        infoFormModel.value.validate().then(valid =>{
            data.confirmLoading = true // 显示loading
            if (!data.isAdd) {
              $updateById( data.recordId, data.saveObject).then(res => {
                message.success('修改成功')
                data.isShow = false
                props.callbackFunc() // 刷新列表
              }).catch(res => { data.confirmLoading = false })
            }else{
              $entsAdd(data.saveObject).then(res=>{
            console.log(99999,res)
              message.success('新增成功')
                data.isShow = false
                props.callbackFunc() // 刷新列表
          }).catch(res=>{data.confirmLoading = false})
            }
        })
    }
</script>
